<!-- 
  @name: 添加/编辑加注机
  @date: 2020.3.9
 -->
<template>
	<view class="content">
		<view class="cont">
			<view class="item">
				<text class="left">设备出厂编号</text>
				<input
					class="int"
					placeholder="填写设备出厂编号"
					placeholder-class="phcolor"
					v-model.trim="info.macCode"
				/>
			</view>
			<view class="item">
				<text class="left">最新设备型号</text>
				<view class="right">
					<text
						class="t"
						v-text="info.macType ? info.macType : '请选择'"
						@tap="dnameBlur"
					></text>
					<view v-show="!info.macType" class="arrow_nav"></view>
				</view>
			</view>
			<view class="item bn">
				<text class="left">安装启用日期</text>
				<view class="right">
					<text
						class="t"
						v-text="info.enableTime ? info.enableTime : '请选择'"
						@tap="dnameBlur"
					></text>
					<view v-show="!info.enableTime" class="arrow_nav"></view>
				</view>
			</view>
		</view>

		<view class="cont mt">
			<view class="item">
				<text class="left">液位传感器</text>
				<view class="right">
					<view
						class="btn"
						:class="info.hasSensor === 1 ? 'sl' : ''"
						@tap="info.hasSensor = 1"
					>
						电压型
					</view>
					<view
						class="btn"
						:class="info.hasSensor === 2 ? 'sl' : ''"
						@tap="info.hasSensor = 2"
					>
						电流型
					</view>
					<view
						class="btn"
						:class="info.hasSensor === 0 ? 'sl' : ''"
						@tap="info.hasSensor = 0"
					>
						无
					</view>
				</view>
			</view>
			<view class="item">
				<text class="left">储液罐总容量(kg)</text>
				<input
					type="digit"
					class="int"
					placeholder="输入储液罐总容量"
					placeholder-class="phcolor"
					v-model.trim="info.totalCapacity"
				/>
			</view>
			<view class="item bn">
				<text class="left">液位总高度(cm)</text>
				<input
					type="digit"
					class="int"
					placeholder-class="phcolor"
					v-model.trim="info.totalHeight"
					:placeholder="info.hasSensor === 1 ? '输入液位总高度' : '选填'"
				/>
			</view>
		</view>

		<view class="cont mt">
			<view class="item">
				<text class="left">机器名称</text>
				<input
					class="int"
					placeholder="输入机器名称"
					placeholder-class="phcolor"
					v-model.trim="info.macName"
				/>
			</view>
			<view class="item">
				<text class="left">机器显示尿素品牌</text>
				<input
					class="int"
					placeholder="输入显示品牌"
					placeholder-class="phcolor"
					v-model.trim="info.ureaType"
				/>
			</view>
			<view class="item">
				<text class="left">
					机器显示单价(元/
					<text v-text="info.units === 0 ? 'L' : 'kg'"></text>
					)
				</text>
				<input
					type="digit"
					class="int"
					placeholder="输入显示单价"
					placeholder-class="phcolor"
					v-model.trim="info.ureaPrice"
				/>
			</view>
			<view class="item">
				<view class="left">灯箱打开时间</view>
				<view class="right">
					<picker class="t" mode="time" :value="info.openTime" @change="timeChange">
						<view>{{ info.openTime }}</view>
					</picker>
					<view class="arrow_nav"></view>
				</view>
			</view>
			<view class="item bn">
				<view class="left">灯箱关闭时间</view>
				<view class="right">
					<picker class="t" mode="time" :value="info.closeTime" @change="timeChange2">
						<view>{{ info.closeTime }}</view>
					</picker>
					<view class="arrow_nav"></view>
				</view>
			</view>
		</view>

		<view class="cont mt" v-show="type === 'e'">
			<view class="item">
				<text class="left">开启/停用</text>
				<switch color="#407CFF" :checked="info.macStatus === 2" @change="switchChe" />
			</view>
		</view>

		<!-- 提交按钮 -->
		<view class="btn_pub_blank"></view>
		<view class="btn_pub bottom" @tap="submit">保存</view>
		<popup-operate-fail ref="operateFail"></popup-operate-fail>
	</view>
</template>

<script>
import popupOperateFail from '@/components/popup/popup-operate-fail.vue';
export default {
	components: { popupOperateFail },
	data() {
		return {
			info: {
				hasSensor: 0, //是否有液位传感器
				macStatus: 2, //添加时默认开启
				openTime: '选择打开时间',
				closeTime: '选择关闭时间',
				units: 0
			}, //信息
			type: '' //页面类型，默认为添加，若值为 e 则是编辑
		};
	},
	onLoad(e) {
		this.siteId = e.siteId;
		this.type = e.type;
		if (this.type === 'e') {
			this.info = JSON.parse(this.$store.state.tmpData);
			this.tempInfo = JSON.parse(JSON.stringify(this.info));
			this.$store.commit('setTmpData', '');
		}
	},
	methods: {
		//开启状态调整
		switchChe(e) {
			this.info.macStatus = e.target.value ? 2 : 3;
		},
		//提交
		submit2() {
			let data = {
				action: 0,
				siteId: this.siteId ? this.siteId : this.info.siteId,
				macCode: this.info.macCode,
				ureaPrice: parseFloat(this.info.ureaPrice),
				ureaType: this.info.ureaType,
				openTime: this.info.openTime,
				closeTime: this.info.closeTime,
				macStatus: this.info.macStatus,
				macName: this.info.macName,
				hasSensor: this.info.hasSensor,
				totalCapacity: (this.info.totalCapacity / 1000).toFixed(2), // 后端保存的是吨
				totalHeight: this.info.totalHeight
			};
			if (this.type === 'e') {
				data.machineId = this.info.machineId;
			}
			this.$http({
				url: this.$api.siteUrl + 'doupdatefillmachine',
				data: data
			}).then(res => {
				this.$successToast('保存成功！');
				setTimeout(() => {
					if (this.type === 'e') {
						uni.$emit('site_editMac', this.info);
					} else {
						this.info.siteId = this.siteId;
						this.info.capacityRatio = res.capacityRatio;
						this.info.capacityRatio2 = this.$toPercent(res.capacityRatio, 0);
						this.info.machineId = res.machineId;
						uni.$emit('site_addMac', this.info);
					}
				}, this.$tmp.TIME_SUC);
				this.$sucBack();
			});
		},
		//提交
		submit() {
			if (!this.info.macCode) {
				this.$showToast('请输入设备号！');
				return;
			}
			if (!this.info.macType) {
				this.$showToast('请选择加注机型号！');
				return;
			}
			if (!this.info.totalCapacity || this.info.totalCapacity <= 0) {
				this.$showToast('请输入储液罐总容量！');
				return;
			}
			if (
				this.info.hasSensor === 1 &&
				(!this.info.totalHeight || this.info.totalHeight <= 0)
			) {
				this.$showToast('请输入液位总高度！');
				return;
			}
			if (!this.info.macName) {
				this.$showToast('请输入机器名称！');
				return;
			}
			if (!this.info.ureaType) {
				this.$showToast('请输入机器显示品牌！');
				return;
			}
			if (!this.info.ureaPrice) {
				this.$showToast('请输入机器显示单价！');
				return;
			} else {
				this.info.ureaPrice = this.$operation(this.info.ureaPrice, '+', 0);
			}
			if (this.info.openTime.indexOf(':') < 0) {
				this.$showToast('请选择灯箱开启时间！');
				return;
			}
			if (this.info.closeTime.indexOf(':') < 0) {
				this.$showToast('请选择灯箱关闭时间！');
				return;
			}
			if (
				(this.info.parentId || this.info.macIds) &&
				parseFloat(this.tempInfo.ureaPrice) != parseFloat(this.info.ureaPrice)
			) {
				this.$refs.operateFail.open();
				return;
			}
			this.submit2();
		},
		//灯箱开启时间
		timeChange(e) {
			this.info.openTime = e.target.value;
		},
		//灯箱关闭时间
		timeChange2(e) {
			this.info.closeTime = e.target.value;
		},
		//点击型号或启动日期选择，获取信息
		dnameBlur() {
			if (!this.info.macCode) {
				this.$showToast('请输入设备出厂编号！');
				return;
			}

			this.$http({
				url: this.$api.siteUrl + 'getfillmachinedetail',
				data: {
					macCode: this.info.macCode
				}
			}).then(res => {
				this.info = res;
			});
		}
	}
};
</script>

<style lang="scss">
.cont.mt {
	margin-top: $spacing-col;
}
.cont {
	width: 750rpx;
	padding: 0 35rpx;
	background-color: $color-white;
	.item.bn {
		border-bottom: none;
	}
	.item {
		width: 100%;
		padding: 32rpx 0;
		border-bottom: 1rpx solid $color-list;
		display: flex;
		flex-direction: row;
		align-items: center;
		.left {
			width: 290rpx;
			color: $color-grey-dark;
		}
		.int,
		.right {
			flex: 1;
		}
		.right {
			display: flex;
			flex-direction: row;
			align-items: center;
			.t {
				flex: 1;
			}
		}
		.btn {
			width: 150rpx;
			height: 54rpx;
			line-height: 54rpx;
			text-align: center;
			margin-right: 35rpx;
			font-size: 24rpx;
			border-radius: 26rpx;
			background-color: #eee;
		}
		.btn.sl {
			color: $color-white;
			background-color: $color-primary;
		}
	}
}
</style>
